<template>
  <div class="content">
    <div class="mt0">
      <div class="mt0_main">
        <div class="mt0_title">
          <a @click="$router.back()" class="back"></a>
          <h4>立即投标</h4>
        </div>
        <div class="mt0_content">
          <div class="mt0_item">
            <div class="mt0_item_title">账户可用余额（元）</div>
            <div class="mt0_item_money">¥ {{ data.money }}元</div>
          </div>
          <div class="mt0_item mt0_item_last">
            <div class="mt0_item_title">项目可投金额（元）</div>
            <div class="mt0_item_money">¥ {{ data.kt_money }}元</div>
          </div>
        </div>
      </div>
    </div>
    <div class="item_name">{{ data.name }}</div>
    <form method="post" class="form" @submit.prevent="handleSubmit">
      <div class="top">
        <div class="money_box">
          <div class="title1">投资金额</div>
          <div class="amount_box">
            <span>¥</span>
            <input
              type="number"
              v-model.tirm="money"
              :placeholder="`最低起投${data.min_money}元`"
              @input="inputHandle"
              name="money"
              id="money"
              class="bid_money"
            />
            <div class="clear_num" v-show="money > 0" @click="clear_num_handle"></div>
          </div>
          <div class="line"></div>
        </div>
        <div class="form_item">
          <div class="form_item_left">结息时间</div>
          <div>
            满
            <span class="yellow">24小时</span>自动结息
          </div>
        </div>
        <div class="form_item" v-show="is_vouchers">
          <div class="form_item_left">代金劵</div>
          <div>
            <input class="radio_inp" type="radio" value="0" v-model="shiji" />
            <label for="one">不使用</label>

            <input class="radio_inp" type="radio" :value="is_vouchers_money" v-model="shiji" />
            <label for="two">{{ is_vouchers_money }}</label>
          </div>
        </div>
        <div v-show="parseFloat(money) >= parseFloat(is_vouchers_money)">
          <div class="form_item1" v-show="is_vouchers">
            <div style="color:#FF4A35">实际付款金额： ¥{{ money - shiji }}元</div>
          </div>
        </div>
      </div>

      <div class="pay_box">
        <span class="left_icon"></span>
        <input :type="psd_type" class="inp_pay" v-model.trim="passwd" placeholder="请输入交易密码" />
        <span
          class="right_icon"
          :class="psd_type == 'password' ? '' : 'right_icon_open'"
          @click="show_psd"
        ></span>
      </div>
      <div class="forgetpay">
        <div class="btn" @click="$router.push('/setPasswordPay')">忘记密码?</div>
      </div>
      <div class="btn_wrap">
        <!-- <button
          type="submit"
          class="btn basic_btn_v2"
          :class="money > 0 && passwd != '' ? '' : 'no_touch'"
        >
          确认投资
        </button>-->
        <button class="btn_charge2" v-if="!passwd">确认修改</button>

        <button v-if="passwd" class="btn_charge" type="submit">确认修改</button>
      </div>
    </form>
  </div>
</template>

<script>
import Fetch from "../../utils/fetch";

export default {
  name: "index",
  components: {},
  data() {
    return {
      data: {},
      money: "",
      passwd: "",
      id: 0,
      is_vouchers: false,
      is_vouchers_money: 0,
      shiji: "0",
      now_money_num: 0,
      psd_type: "password"
    };
  },
  created() {
    this.$parent.footer(false);
  },
  mounted() {
    this.id = this.$route.query.id;
    this.start();
  },
  methods: {
    clear_num_handle() {
      this.money = "";
    },
    show_psd() {
      if (this.psd_type == "password") {
        this.psd_type = "text";
      } else {
        this.psd_type = "password";
      }
    },
    inputHandle(ev) {
      var number = parseFloat(ev.target.value);
      if (number >= parseFloat(this.data.max_money)) {
        this.money = parseFloat(this.data.max_money);
      }
      // if(number<=parseFloat(this.data.min_money)){
      // 	this.money = parseFloat(this.data.min_money);
      // }
    },
    start() {
      Fetch("/item/dq/index", {
        id: this.id
      }).then(res => {
        this.data = res.data;
        // this.money = res.data.min_money;
        this.is_vouchers_money = res.data.vouchers_money;
        if (res.data.vouchers_money > 0) {
          this.is_vouchers = true;
        } else {
          this.is_vouchers = false;
        }

        this.now_money_num = this.money;
      });
    },
    back() {
      this.$router.push("/item/" + this.id);
    },
    getClass(channel) {
      return "recharge_online_" + channel;
    },
    handleSubmit() {
      var djq_num = 0;
      if (this.shiji == 0) {
        djq_num = 0;
      } else {
        djq_num = this.is_vouchers_money;
      }
      if (!this.money) {
        this.$notify({
          message: "请输入投入金额",
          color: "#FF3232",
          background: "#FFEAEA"
        });
        return;
      }

      if (!this.passwd) {
        this.$notify({
          message: "请输入交易密码",
          color: "#FF3232",
          background: "#FFEAEA"
        });
        return;
      }
      Fetch("/item/dq/apply", {
        id: this.id,
        money: this.money,
        passwd: this.passwd,
        vouchers_money: djq_num
      }).then(() => {
        this.$notify({
          background: "#EAF1FF",
          color: "#3292FF",
          message: "投资成功"
        });
        this.$router.replace("/touzi");
      });
    }
  }
};
</script>

<style lang="less" scoped>
html,
body {
  background: #f3f4f4;
}

.content {
  background-color: #f7f8f9;
  min-height: 100vh;
}

.mt0_title {
  height: 32px;
  padding: 0 18px;
  display: flex;
  position: relative;
  align-items: center;

  .back {
    position: absolute;
    width: 20px;
    left: 18px;
    height: 18px;
    background-image: url("../../assets/img/project/back.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    z-index: 20;
  }

  h4 {
    font-size: 15px;
    color: #ffffff;
    width: 100%;
    text-align: center;
  }
}

.item_name {
  background-color: #ffffff;
  padding: 0 18px;
  font-size: 15px;
  color: #3e3e3e;
  line-height: 44px;
  height: 44px;
  margin: 9px 0;
}

.money_box {
  margin: 0;
  padding: 0;
}

.radio_inp {
  width: 15px;
  height: 15px;
  border: 1px solid #e3e3e3;
  border-radius: 50%;
  background-color: #efefef;
  margin-left: 20px;
  margin-right: 4px;
}

.radio_inp[type="radio"]:checked {
  background: url("../../assets/img/project/check.png") no-repeat center center;
  background-size: 100% 100%;
  border: none;
}

.forgetpay {
  padding: 0px 16px;
  height: 36px;
  line-height: 36px;
  background-color: #f7f8f9;
  .btn {
    float: right;
    font-size: 14px;
    color: #999999;
  }
}

::-moz-placeholder {
  color: #9e9ea0;
}

::-webkit-input-placeholder {
  color: #9e9ea0;
}

:-ms-input-placeholder {
  color: #9e9ea0;
}

.mt0 {
  width: 100%;
  height: 159px;
  // background: linear-gradient(
  //   180deg,
  //   rgba(193, 147, 73, 1) 12%,
  //   rgba(219, 185, 137, 1) 100%
  // );
  background: linear-gradient(180deg, #ff3927, #ff6b4f 133%);
  padding-top: 8px;
}

.mt0 .mt0_main {
  width: 100%;
}

.mt0 .mt0_main .mt0_content {
  width: 100%;
  margin-top: 28px;
  display: flex;
  justify-content: space-between;

  .mt0_item {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;

    .mt0_item_title {
      font-size: 13px;
      line-height: 18px;
    }

    .mt0_item_money {
      font-size: 28px;
      line-height: 40px;
    }
  }

  .mt0_item_last {
    border-left: 1px solid #ffffff38;
  }
}

@media (max-width: 370px) {
  .mt0 .mt0_main .mt0_content {
    .mt0_item {
      .mt0_item_money {
        font-size: 20px;
      }
    }
  }
}

@media (min-width: 371px) and (max-width: 414px) {
  .mt0 .mt0_main .mt0_content {
    .mt0_item {
      .mt0_item_money {
        font-size: 24px;
      }
    }
  }
}

.form {
  width: 100%;
  padding-top: 13px;
  background-color: #ffffff;

  .apr_title {
    line-height: 22px;
    color: #333333;
    font-size: 16px;
  }

  .top {
    padding: 0 18px;
    // border-bottom: 8px solid #f7f8f9;
  }
}

.form_item {
  width: 100%;
  line-height: 18px;
  font-size: 13px;
  color: #999999;
  margin-top: 12px;
  display: flex;
  justify-content: space-between;
}

.form_item1 {
  line-height: 17px;
  color: #007aff;
  font-size: 12px;
  margin-top: 3px;
  text-align: right;
}
.pay_box {
  border-top: 8px solid #f7f8f9;
}
.form .basic_btn_v2 {
  display: block;
  width: 90.1%;
  height: 1.46875rem;
  line-height: 1.46875rem;
  text-align: center;
  // background: linear-gradient(180deg,#ff3927, #ff6b4f 133%);
}
.btn_wrap {
  background-color: #f7f8f9;
}
.btn_charge {
  width: 318px;
  height: 50px;
  margin: auto;
  display: block;
  background: linear-gradient(180deg, #ff3927, #ff6b4f 133%);
  border-radius: 5px;
  box-shadow: 0px 2px 4px 0px #ffd9d4;
  margin-top: 50px;

  font-size: 17px;
  font-family: PingFangSC, PingFangSC-Medium;
  font-weight: 500;
  color: #ffffff;
}
.btn_charge2 {
  width: 318px;
  height: 50px;
  margin: auto;
  display: block;
  background: #ccc;
  border-radius: 5px;
  // box-shadow: 0px 2px 4px 0px #ffd9d4;
  margin-top: 50px;

  font-size: 17px;
  font-family: PingFangSC, PingFangSC-Medium;
  font-weight: 500;
  color: #ffffff;
}
</style>
